<template>
  <div>
    <BillDetailDrawer
        v-if="billDetailVisible"
        :visible="billDetailVisible"
        :id="bill_id"
        showType="modal"
        @cancel="onBillDetailClose"
    ></BillDetailDrawer>

    <!-- 收支流水详情 -->
    <TurnoverDetailDrawer
        :visible="showTurnover"
        :id="bill_stream_id"
        @handleCancel="onTurnoverDetailClose"
    />

    <!-- 新建收支流水   -->
    <a-drawer
        :closable="false"
        :visible="turnoverVisible"
        :width="1100"
        :body-style="{
        padding: 0,
        height: '100%',
        background: '#f7f7f7',
      }"
        :destroyOnClose="true"
        :headerStyle="{ padding: 0 }"
        @close="onTurnoverClose"
        :key="Math.random()"
    >
      <NewTurnover
          :isDrawer="true"
          :ownerIdByDrawer="addTurnoverOwnerId"
          :bindExtraInfo="addTurnoverInfo"
          @cancel="onTurnoverClose"
          @save="onTurnoverClose"
      />
    </a-drawer>

    <OwnerContEdit
      :visible="Ownervalue"
      @cancel="handleBuildingClose"
      @btnok="searchClose"
    />
  </div>
</template>

<script>
import TurnoverDetailDrawer from '@/views/bill/TurnoverDetail/modules/TurnoverDetailDrawer.vue'
import BillDetailDrawer from '@/views/bill/BillDetail/modules/BillDetailDrawer.vue'
import NewTurnover from '@/views/bill/NewTurnover/index.vue'
import store from '@/store'
import {computed, reactive, watch, toRefs, onMounted} from 'vue'
import defaultSetting from '@/common/utils/defaultSetting'
import OwnerContEdit from "@/views/village/OwnerManage/modules/OwnerContEdit.vue";

export default {
  components: { NewTurnover, BillDetailDrawer, TurnoverDetailDrawer, OwnerContEdit},
  setup() {

    const state = reactive({
      billDetailVisible: false,
      bill_id: "",
      showTurnover: false,
      bill_stream_id: "",
      turnoverVisible: false,
      addTurnoverOwnerId: 0,
      addTurnoverInfo: 0,
      Ownervalue: false,
    });

    onMounted(() => {

      const appData = window?.microApp?.getData() || {};
      if (appData.componentType == 'billDetail') {
        state.billDetailVisible = window?.microApp?.getData().visible
        state.bill_id = window?.microApp?.getData().bill_id
      } else if (appData.componentType == 'turnoverDetail') {
        state.showTurnover = window?.microApp?.getData().visible
        state.bill_stream_id = window?.microApp?.getData().bill_stream_id
      } else if (appData.componentType == 'TenantComponent') {
        state.Ownervalue = true;
      }
    });
    const onTurnoverDetailClose = () => {

      state.showTurnover = false;
      window.microApp.forceDispatch({type: "close"})

    };


    const onTurnoverClose = () => {

      window.microApp.forceDispatch({type: "close"})
    };

    const onBillDetailClose = () => {
      state.billDetailVisible = false;
      window.microApp.forceDispatch({type: "close"})
    };

    //取消新增租客
    const handleBuildingClose = () => {
      state.Ownervalue = false;
    };

    //确定新增租客
    const searchClose = () => {
      state.Ownervalue = false;
      // init()
    };

    return {
      ...toRefs(state),
      onBillDetailClose,
      onTurnoverDetailClose,
      onTurnoverClose,
      handleBuildingClose,
      searchClose,
    }
  }
}
</script>

<style lang="scss" scoped>

</style>